<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Roker  - Corporate, Creative, Multi Purpose, Responsive And Retina Template</title> 
    <meta name="keywords" content="HTML5 Template" />
    <meta name="description" content="Roker  - Corporate, Creative, Multi Purpose, Responsive And Retina Template">
    <meta name="author" content="iwthemes.com">   

    <!-- Mobile Metas -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Theme CSS -->
    <link href="css/style.css" rel="stylesheet" media="screen">

    <!-- Skins Theme -->
    <link href="#" rel="stylesheet" media="screen" class="skin">

    <!-- Favicons -->
    <link rel="shortcut icon" href="img/icons/favicon.ico">
    <link rel="apple-touch-icon" href="img/icons/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="img/icons/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="img/icons/apple-touch-icon-114x114.png">  

    <!-- Head Libs -->
    <script src="js/modernizr.js"></script>

    <!--[if lte IE 9]>
        <script src="http://getbootstrap.com/docs-assets/js/html5shiv.js"></script>
        <script src="js/responsive/respond.js"></script>
    <![endif]-->

    <!-- styles for IE -->
    <!--[if lte IE 8]>
        <link rel="stylesheet" href="css/ie/ie.css" type="text/css" media="screen" />            
    <![endif]-->

    <!-- Skins Changer-->
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
   
  </head>
  <body> 

    <!-- Theme-options -->
    <div id="theme-options">
            <div class="title">Theme Options<span title="Theme Options"><i class="fa fa-cogs right"></i></span></div>
            <span>COLORS</span>
            <ul id="colorchanger">      
                <li><a class="colorbox blue" href="?theme=blue" title="Blue Skin"></a></li>
                <li><a class="colorbox red" href="?theme=red" title="Red Skin"></a></li>
                <li><a class="colorbox yellow" href="?theme=yellow" title="Yellow Skin"></a></li>
                <li><a class="colorbox green" href="?theme=green" title="Green Skin"></a></li>
                <li><a class="colorbox orange" href="?theme=orange" title="Orange Skin"></a></li>
                <li><a class="colorbox purple" href="?theme=purple" title="Purple Skin"></a></li>
                <li><a class="colorbox pink" href="?theme=pink" title="Pink Skin"></a></li>
                <li><a class="colorbox cocoa" href="?theme=cocoa" title="Cocoa Skin"></a></li>
            </ul>
            <span>LAYOUT STYLE</span>
            <ul class="layout-style">      
                <li class="wide active">Wide</li>
                <li class="boxed">Boxed</li> 
                <li class="boxed-margin">Boxed Margin</li>               
            </ul>
            <span>WEBSITE TYPE</span>
           <ul class="layout-style">      
                <li class="active"><a href="index.html">Corporate</a></li>
                <li><a href="index-creative.html">Creative</a></li>
                <li><a href="index-one-page.html" >One Page</a></li>                
            </ul>  
            <div class="patterns">
                <span>BACKGROUND PATTERNS</span>
                <ul class="backgrounds">
                    <li class="bgnone" title="None - Default"></li>
                    <li class="bg1"></li>
                    <li class="bg2"></li>
                    <li class="bg3"></li>
                    <li class="bg4 "></li>
                    <li class="bg5"></li> 
                    <li class="bg6"></li>
                    <li class="bg7"></li>
                    <li class="bg8"></li>
                    <li class="bg9 "></li>
                    <li class="bg10"></li> 
                    <li class="bg11"></li>                   
                </ul>  
            </div>
    </div>
    <!-- End Theme-options -->
        
    <!-- layout-->
    <div id="layout">

         <!-- Login Client -->
        <div class="jBar">
          <div class="container">            
              <div class="row">    

                  <div class="col-md-10">
                     <div class="row padding-top-mini">
                        <!-- Item service-->
                        <div class="col-md-4">
                            <div class="item-service border-right">
                                <div class="row head-service">
                                    <div class="col-md-2">
                                        <i class="fa fa-check-square"></i>                             
                                    </div>
                                    <div class="col-md-10">
                                        <h5>Login or create new account.</h5>
                                    </div>
                                </div>  
                                <p>Pellentesque habitant morbi fames ac turpis egestas. Vestibulum tortor quam. Pellentesque habitant</p>
                            </div>
                        </div>      
                        <!-- End Item service-->

                        <!-- Item service-->
                        <div class="col-md-4">
                            <div class="item-service border-right">
                                <div class="row head-service">
                                    <div class="col-md-2">
                                        <i class="fa fa-star"></i>                             
                                    </div>
                                    <div class="col-md-10">
                                        <h5>Review your order.</h5>
                                    </div>
                                </div>  
                                <p>Pellentesque habitant morbi fames ac turpis egestas. Vestibulum tortor quam Pellentesque habitant.</p>
                            </div>
                        </div>      
                        <!-- End Item service-->

                        <!-- Item service-->
                        <div class="col-md-4">
                            <div class="item-service border-right">
                                <div class="row head-service">
                                    <div class="col-md-2">
                                        <i class="fa fa-credit-card"></i>                             
                                    </div>
                                    <div class="col-md-10">
                                        <h5>Payment And FREE shipment.</h5>
                                    </div>
                                </div>  
                                <p>Pellentesque habitant morbi fames ac turpis egestas. Vestibulum tortor quam. Pellentesque habitant</p>
                            </div>
                        </div>      
                        <!-- End Item service-->
                     </div>
                  </div>

                  <div class="col-md-2">
                      <h5>Client Login</h5>
                      <form>
                          <input type="email" placeholder="Username" required>
                          <input type="password" placeholder="Password" required>
                          <input type="submit" class="btn btn-primary" value="sign in">
                          <span>Or</span>                       
                          <input type="submit" class="btn btn-primary" value="Register">
                      </form>
                  </div>

                            
                  <span class="jTrigger downarrow"><i class="fa fa-minus"></i></span>
              </div>
          </div>
      </div>
      <span class="jRibbon jTrigger up" title="Login"><i class="fa fa-plus"></i></span>
      <div class="line"></div>
      <!-- End Login Client -->

        <!-- Info Head -->
        <section class="info-head">  
            <div class="container">
                <ul>  
                    <li><i class="fa fa-headphones"></i> 01800034567</li>
                    <li><i class="fa fa-comment"></i> <a href="#">Live chat</a></li>
                    <li>
                        <ul>
                          <li class="dropdown">
                            <i class="fa fa-globe"></i> 
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                Language<i class="fa fa-angle-down"></i>
                            </a>
                             <ul class="dropdown-menu">  
                                 <li><a href="#"><img src="img/language/spanish.png" alt="">Spanish</a></li>
                                 <li><a href="#"><img src="img/language/english.png" alt="">English</a></li>
                                 <li><a href="#"><img src="img/language/frances.png" alt="">Frances</a></li>
                                 <li><a href="#"><img src="img/language/portugues.png" alt="">Portuguese</a></li>
                            </ul>
                          </li>                      
                        </ul>
                    </li>
                </ul> 
            </div>            
        </section>
        <!-- Info Head -->

        <!-- Header-->
        <header class="animated fadeInDown delay1">           
            <div class="container">
                <div class="row">

                    <!-- Logo-->
                    <div class="col-md-3 logo">
                        <a href="index.html" title="Return Home">                            
                            <img src="img/logo.png" alt="Logo" class="logo_img">
                        </a>
                    </div>
                    <!-- End Logo-->
                                                      
                    <!-- Nav-->
                    <nav class="col-md-9">
                        <!-- Menu-->
                        <ul id="menu" class="sf-menu">
                            <li>
                                <a href="index.html">HOME <i class="fa fa-angle-down"></i></a>
                                <ul>                                  
                                    <li><a href="index.html">Home Corporate</a></li>
                                    <li><a href="index-creative.html">Home Creative</a></li>
                                    <li><a href="index-alternative.html">Home Alternative</a></li>
                                    <li><a href="index-one-page.html">Home One Page</a></li>
                                </ul>
                            </li>
                            <li><a href="about.html">ABOUT</a></li>
                            <li><a href="services.html">SERVICES <i class="fa fa-angle-down"></i></a>
                                <ul>                                  
                                    <li><a href="services.html">Services Default</a></li>
                                    <li><a href="services-options.html">6 services options</a></li><li><a href="http://www.weidea.net">More</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="feature-princing-tables.html">FEATURES <i class="fa fa-angle-down"></i></a>
                                <ul> 
                                    <li>
                                        <a href="#">Sliders Options<i class="fa fa-angle-right"></i></a>
                                        <ul>
                                            <li><a href="index.html">Camera Slider Advance Captions</a></li>
                                             <li><a href="index-one-page.html">Camera Slider Simple Captions</a></li>
                                            <li><a href="index-alternative.html">Flex Slider ( Video option)</a></li>
                                        </ul>
                                    </li>   
                                    <li>
                                        <a href="#">Pages <i class="fa fa-angle-right"></i></a>
                                        <ul>
                                            <li><a href="page-register.html">Register User</a></li>                              
                                            <li><a href="page-full-width.html">Full Width</a></li>
                                            <li><a href="page-left-sidebar.html">Left Sidebar</a></li>
                                            <li><a href="page-right-sidebar.html">Right Sidebar</a></li>
                                            <li><a href="page-404.html">404 Page</a></li>
                                            <li><a href="page-faq.html">FAQ</a></li>
                                            <li><a href="sitemap.html">Sitemap</a></li>
                                         </ul>
                                    </li> 
                                    <li>
                                        <a href="#">Headers <i class="fa fa-angle-right"></i></a>
                                        <ul>
                                            <li><a href="feature-header-1.html">Header Version 1</a></li>
                                            <li><a href="feature-header-2.html">Header Version 2</a></li>
                                            <li><a href="feature-header-3.html">Header Version 3</a></li>
                                        </ul>
                                    </li> 
                                    <li>
                                        <a href="#">Footers <i class="fa fa-angle-right"></i></a>
                                        <ul>
                                            <li><a href="feature-footer-1.html#footer">Footer Version 1</a></li>
                                            <li><a href="feature-footer-2.html#footer">Footer Version 2</a></li>
                                            <li><a href="feature-footer-3.html#footer">Footer Version 3</a></li>
                                        </ul>
                                    </li>                           
                                    <li><a href="feature-princing-tables.html">Princing Tables</a></li>
                                    <li><a href="feature-grid-system.html">Grind System</a></li>
                                    <li><a href="feature-typograpy.html">Tipograpy</a></li>
                                    <li><a href="feature-icons.html">Icons</a></li>
                                    <li><a href="feature-elements.html">Elements</a></li>
                                 </ul>
                            </li>   
                            <li>
                                <a href="work-4-columns.html">WORK <i class="fa fa-angle-down"></i></a>
                                <ul>                                  
                                    <li><a href="work-4-columns.html">4 Columns</a></li>
                                    <li><a href="work-3-columns.html">3 Columns</a></li>
                                    <li><a href="work-2-columns.html">2 Columns</a></li>
                                    <li><a href="single-work.html">Single Work</a></li>
                                </ul>
                            </li>                                
                                <li>
                                <a href="blog.html">BLOG <i class="fa fa-angle-down"></i></a>
                                <ul>                                  
                                    <li><a href="blog.html">Post</a></li>
                                    <li><a href="blog-post.html">Single Post</a></li>
                                </ul>
                            </li>                                                                        
                            <li><a href="contact.html">CONTACT</a></li>
                        </ul>
                        <!-- End Menu-->
                    </nav>
                    <!-- End Nav-->
                    
                </div><!-- End Row-->
            </div><!-- End Container-->
        </header>
        <!-- End Header-->


        <!-- Title Section -->           
        <section class="title-section">
            <div class="container">
                <!-- crumbs --> 
                <div class="row crumbs">
                   <div class="col-md-12">
                        <a href="index.html">Home</a> / <a href="#">Blog </a> / Post 
                   </div>
                </div>
                <!-- End crumbs --> 

                <!-- Title - Search--> 
                <div class="row title">
                    <!-- Title --> 
                    <div class="col-md-9">
                        <h1>Blog
                            <span class="subtitle-section">
                                Page post
                                <span class="left"></span>
                                <span class="right"></span>
                            </span>
                            <span class="line-title"></span>
                        </h1>
                    </div>
                    <!-- End Title--> 

                    <!-- Search--> 
                    <div class="col-md-3">
                        <form class="search" action="#" method="Post">
                            <div class="input-group">
                                <input class="form-control" placeholder="Search..." name="email"  type="email" required="required">
                                <span class="input-group-btn">
                                    <button class="btn btn-primary" type="submit" name="subscribe" >Go!</button>
                                </span>
                            </div>
                        </form>  
                    </div>
                    <!-- End Search--> 
                </div>
                <!-- End Title -Search --> 
              
            </div>
        </section>   
        <!-- End Title Section --> 


        <!-- Works -->
        <section class="paddings">
            <div class="container">
                <div class="row">   

                    <!-- Blog Post -->
                    <div class="col-md-8">
                       
                        <!-- Item Post -->
                        <article class="post">
                            <div class="row">
                                <!-- Image  post --> 
                                <div class="col-md-5">
                                    <!-- Image Post  --> 
                                    <div class="post-image">
                                        <!-- Simple-slide --> 
                                        <div id="carousel-example-generic" class="carousel slide bs-docs-carousel-example">
                                            <ol class="carousel-indicators">
                                                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                                                <li data-target="#carousel-example-generic" data-slide-to="1" class="">
                                                <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
                                            </ol>
                                            <div class="carousel-inner">
                                                <div class="item active">
                                                    <img src="img/works/1.jpg" alt="">
                                                </div>
                                               <div class="item">
                                                    <img src="img/works/2.jpg" alt="">
                                                </div>
                                                <div class="item">
                                                    <img src="img/works/3.jpg" alt="">
                                                </div>
                                            </div>
                                            <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                                                <span class="icon-prev"></span>
                                            </a>
                                            <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                                                <span class="icon-next"></span>
                                            </a>
                                        </div>
                                        <!-- End Simple-slide --> 
                                    </div>
                                    <!-- End Image Post  --> 
                                </div>
                                <!-- End Image  post --> 

                                <!-- Info post --> 
                                <div class="col-md-7">
                                     <h3><a href="blog-post.html">Slide Image Post.</a></h3>
                                     <!-- Post Meta --> 
                                     <div class="row">
                                        <div class="col-md-12">
                                            <div class="post-meta">
                                                <span><i class="fa fa-calendar"></i> Nov 10, 2012 </span>
                                                <span><i class="fa fa-user"></i> By <a href="#">Admin</a> </span>
                                                <span><i class="fa fa-tag"></i> <a href="#">Duis</a>, <a href="#">News</a></span>
                                                <span><i class="fa fa-comments"></i> <a href="#">(12)</a></span>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- End Post Meta --> 
                                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur [...]</p>
                                     <a href="blog-post.html" class="btn btn-primary">Read more...</a>
                                </div>
                                <!--End Info post --> 
                            </div>  
                        </article>
                        <!-- End Item Post -->

                        <!-- Item Post -->
                        <article class="post">
                            <div class="row">
                                <!-- Image and meta post --> 
                                <div class="col-md-5">                                  

                                    <!-- Image Post  --> 
                                    <div class="post-image">
                                       <img src="img/works/2.jpg" alt="">
                                    </div>
                                            <!-- End Image Post  --> 
                                </div>
                                <!-- End Image and meta post --> 

                                <!-- Info post --> 
                                <div class="col-md-7">
                                     <h3><a href="blog-post.html">The complete solution.</a></h3>
                                    <!-- Post Meta --> 
                                     <div class="row">
                                        <div class="col-md-12">
                                            <div class="post-meta">
                                                <span><i class="fa fa-calendar"></i> Nov 10, 2012 </span>
                                                <span><i class="fa fa-user"></i> By <a href="#">Admin</a> </span>
                                                <span><i class="fa fa-tag"></i> <a href="#">Duis</a>, <a href="#">News</a></span>
                                                <span><i class="fa fa-comments"></i> <a href="#">(12)</a></span>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- End Post Meta --> 
                                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur [...]</p>
                                     <a href="blog-post.html" class="btn btn-primary">Read more...</a>
                                </div>
                                <!--End Info post --> 
                            </div>  
                        </article>
                        <!-- End Item Post -->

                        <!-- Item Post -->
                        <article class="post">
                            <div class="row">
                                <!-- Image and meta post --> 
                                <div class="col-md-5">

                                    <!-- Image Post  --> 
                                    <div class="post-image">
                                       <img src="img/works/3.jpg" alt="">
                                    </div>
                                            <!-- End Image Post  --> 
                                </div>
                                <!-- End Image and meta post --> 

                                <!-- Info post --> 
                                <div class="col-md-7">
                                     <h3><a href="blog-post.html">The complete solution.</a></h3>
                                     <!-- Post Meta --> 
                                     <div class="row">
                                        <div class="col-md-12">
                                            <div class="post-meta">
                                                <span><i class="fa fa-calendar"></i> Nov 10, 2012 </span>
                                                <span><i class="fa fa-user"></i> By <a href="#">Admin</a> </span>
                                                <span><i class="fa fa-tag"></i> <a href="#">Duis</a>, <a href="#">News</a></span>
                                                <span><i class="fa fa-comments"></i> <a href="#">(12)</a></span>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- End Post Meta --> 
                                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur [...]</p>
                                     <a href="blog-post.html" class="btn btn-primary">Read more...</a>
                                </div>
                                <!--End Info post --> 
                            </div>  
                        </article>
                        <!-- End Item Post -->

                        <!-- Item Post -->
                        <article class="post">
                            <div class="row">
                                <!-- Image and meta post --> 
                                <div class="col-md-5">

                                    <!-- Image Post  --> 
                                    <div class="post-image">
                                       <img src="img/works/4.jpg" alt="">
                                    </div>
                                    <!-- End Image Post  --> 
                                </div>
                                <!-- End Image and meta post --> 

                                <!-- Info post --> 
                                <div class="col-md-7">
                                     <h3><a href="blog-post.html">The complete solution.</a></h3>
                                     <!-- Post Meta --> 
                                     <div class="row">
                                        <div class="col-md-12">
                                            <div class="post-meta">
                                                <span><i class="fa fa-calendar"></i> Nov 10, 2012 </span>
                                                <span><i class="fa fa-user"></i> By <a href="#">Admin</a> </span>
                                                <span><i class="fa fa-tag"></i> <a href="#">Duis</a>, <a href="#">News</a></span>
                                                <span><i class="fa fa-comments"></i> <a href="#">(12)</a></span>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- End Post Meta --> 
                                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur [...]</p>
                                     <a href="blog-post.html" class="btn btn-primary">Read more...</a>
                                </div>
                                <!--End Info post --> 
                            </div>  
                        </article>
                        <!-- End Item Post -->

                        <!-- Item Post -->
                        <article class="post">
                            <div class="row">
                                <!-- Image and meta post --> 
                                <div class="col-md-5">

                                    <!-- Image Post  --> 
                                    <div class="post-image">
                                       <img src="img/works/5.jpg" alt="">
                                    </div>
                                    <!-- End Image Post  --> 
                                </div>
                                <!-- End Image and meta post --> 

                                <!-- Info post --> 
                                <div class="col-md-7">
                                     <h3><a href="blog-post.html">The complete solution.</a></h3>
                                     <!-- Post Meta --> 
                                     <div class="row">
                                        <div class="col-md-12">
                                            <div class="post-meta">
                                                <span><i class="fa fa-calendar"></i> Nov 10, 2012 </span>
                                                <span><i class="fa fa-user"></i> By <a href="#">Admin</a> </span>
                                                <span><i class="fa fa-tag"></i> <a href="#">Duis</a>, <a href="#">News</a></span>
                                                <span><i class="fa fa-comments"></i> <a href="#">(12)</a></span>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- End Post Meta --> 
                                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur [...]</p>
                                     <a href="blog-post.html" class="btn btn-primary">Read more...</a>
                                </div>
                                <!--End Info post --> 
                            </div>  
                        </article>
                        <!-- End Item Post -->

                        <!-- Pagination -->
                        <ul class="pagination">
                            <li><a href="#">«</a></li>
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                             <li class="active"><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li><a href="#">»</a></li>
                        </ul>
                        <!-- End Pagination -->


                    </div>            
                    <!-- End Blog Post -->   

                   
                    <!-- Sidebars -->
                    <div class="col-md-4 sidebars">

                        <aside>
                            <h4>Searh Sidebar</h4>
                            <form class="search" action="#" method="Post">
                                <div class="input-group">
                                    <input class="form-control" placeholder="Search..." name="email"  type="email" required="required">
                                    <span class="input-group-btn">
                                        <button class="btn btn-primary" type="submit" name="subscribe" >Go!</button>
                                    </span>
                                </div>
                            </form>   
                        </aside>

                        <hr>
                        
                        <aside>
                            <h4>Categories</h4>
                            <ul class="list">
                                <li><i class="fa fa-check"></i><a href="#">Design</a></li>
                                <li><i class="fa fa-check"></i><a href="#">Photos</a></li>
                                <li><i class="fa fa-check"></i><a href="#">Videos</a></li>
                                <li><i class="fa fa-check"></i><a href="#">Lifestyle</a></li>
                                <li><i class="fa fa-check"></i><a href="#">Technology</a></li>
                            </ul>
                        </aside>  


                        <aside class="tags">
                            <h4>Tags</h4>
                            <a href="#" class="#" title="17 topic"><i class="fa fa-tag"></i> corporate </a>
                            <a href="#" class="#" title="44 topic"><i class="fa fa-tag"></i> theme </a>
                            <a href="#" class="#" title="10 topic"><i class="fa fa-tag"></i> css3 </a>
                            <a href="#" class="#" title="2 topic"><i class="fa fa-tag"></i> premium </a>
                            <a href="#" class="#" title="29 topic"><i class="fa fa-tag"></i> html5 </a>
                            <a href="#" class="#" title="4 topic"><i class="fa fa-tag"></i> business </a>
                            <a href="#" class="#" title="20 topic"><i class="fa fa-tag"></i> all purpose </a>
                            <a href="#" class="#" title="14 topic"><i class="fa fa-tag"></i> jquery </a>
                            <a href="#" class="#" title="1 topic"><i class="fa fa-tag"></i> muse template </a>
                            <a href="#" class="#" title="4 topic"><i class="fa fa-tag"></i> minimalist </a>
                        </aside>    
               
                        
                        <aside>
                            <div class="tabs">
                                <ul class="nav nav-tabs">
                                     <li class="active"><a href="#popularPosts" data-toggle="tab"><i class="fa fa-star"></i> Popular</a></li>
                                    <li class=""><a href="#recentPosts" data-toggle="tab">Recent</a></li>
                                 </ul>
                                <div class="tab-content">

                                    <div class="tab-pane active" id="popularPosts">
                                        <ul class="simple-post-list">
                                            <li>
                                                <div class="post-image">
                                                    <div class="img-thumbnail">
                                                        <a href="blog-post.html">
                                                            <img src="img/clients-downloads/1.jpg" alt="">
                                                        </a>
                                                     </div>
                                                </div>
                                                <div class="post-info">
                                                    <a href="blog-post.html">Pellentesque habitant morbi.</a>
                                                    <div class="post-meta">
                                                            Nov 25 / 7 / 2013
                                                     </div>
                                                 </div>
                                            </li>

                                            <li>
                                                <div class="post-image">
                                                    <div class="img-thumbnail">
                                                        <a href="blog-post.html">
                                                            <img src="img/clients-downloads/2.jpg" alt="">
                                                        </a>
                                                     </div>
                                                </div>
                                                <div class="post-info">
                                                    <a href="blog-post.html">Pellentesque habitant morbi.</a>
                                                    <div class="post-meta">
                                                            Nov 25 / 7 / 2013
                                                     </div>
                                                 </div>
                                            </li>

                                            <li>
                                                <div class="post-image">
                                                    <div class="img-thumbnail">
                                                        <a href="blog-post.html">
                                                            <img src="img/clients-downloads/3.jpg" alt="">
                                                        </a>
                                                     </div>
                                                </div>
                                                <div class="post-info">
                                                    <a href="blog-post.html">Pellentesque habitant morbi.</a>
                                                    <div class="post-meta">
                                                            Nov 25 / 7 / 2013
                                                     </div>
                                                 </div>
                                            </li>
                                              
                                        </ul>
                                    </div>

                                    <div class="tab-pane" id="recentPosts">
                                        <ul class="simple-post-list">
                                            <li>
                                                <div class="post-image">
                                                    <div class="img-thumbnail">
                                                        <a href="blog-post.html">
                                                             <img src="img/clients-downloads/3.jpg" alt="">
                                                        </a>
                                                    </div>
                                                 </div>
                                                <div class="post-info">
                                                    <a href="blog-post.html">Pellentesque habitant morbi.</a>
                                                    <div class="post-meta">
                                                         Nov 25 / 7 / 2013
                                                    </div>
                                                </div>
                                            </li>

                                            <li>
                                                <div class="post-image">
                                                    <div class="img-thumbnail">
                                                        <a href="blog-post.html">
                                                            <img src="img/clients-downloads/2.jpg" alt="">
                                                        </a>
                                                     </div>
                                                </div>
                                                <div class="post-info">
                                                    <a href="blog-post.html">Pellentesque habitant morbi.</a>
                                                    <div class="post-meta">
                                                            Nov 25 / 7 / 2013
                                                     </div>
                                                 </div>
                                            </li>

                                            <li>
                                                <div class="post-image">
                                                    <div class="img-thumbnail">
                                                        <a href="blog-post.html">
                                                            <img src="img/clients-downloads/1.jpg" alt="">
                                                        </a>
                                                     </div>
                                                </div>
                                                <div class="post-info">
                                                    <a href="blog-post.html">Pellentesque habitant morbi.</a>
                                                    <div class="post-meta">
                                                            Nov 25 / 7 / 2013
                                                     </div>
                                                 </div>
                                            </li>
                                              
                                        </ul>
                                    </div>

                                </div>
                            </div>
                        </aside>

                        <aside>
                            <h4>Recent flickr</h4>
                            <ul id="flickr-aside" class="thumbs"></ul>
                        </aside>

                        <hr>

                        <aside>
                            <h4>Wiget Text</h4>
                            <p>Nulla nunc dui, tristique in semper vel, congue sed ligula. Nam dolor ligula, faucibus id sodales in, auctor fringilla libero. Nulla nunc dui, tristique in semper vel. Nam dolor ligula, faucibus id sodales in, auctor fringilla libero.</p>
                        </aside>

                    </div>
                    <!-- End Sidebars -->


                </div>
            </div>
            <!-- End Container-->
        </section>
        <!-- End Works-->
   

        <!-- footer top-->
        <footer class="footer-top">
            <div class="container">
               <div class="row">   
                   <div class="col-md-3">
                       <h3>018000-236-5899 </h3>
                   </div>
                   <div class="col-md-3">
                       <h3><a href="#">Support</a> - <a href="#">Sales</a></h3>
                   </div>
                   <div class="col-md-3">
                       <h3><a href="mailto:sales@roken.com" target="_blank">sales@roken.com</a></h3>
                   </div>
                   <div class="col-md-3">
                       <h3>24x7x365</h3>
                   </div>
               </div>                
            </div>
        </footer>      
        <!-- End footer Top-->

        <!-- footer Center-->
        <footer class="footer-center">
            <div class="container">

               <div class="row top">   
                   <div class="col-md-3 item-center">
                        <span class="arrow_footer"></span>
                        <i class="fa fa-phone"></i>
                        <h4>Talk to u</h4>                        
                   </div>
                   <div class="col-md-3 item-center">
                        <span class="arrow_footer"></span>
                        <i class="fa fa-comment"></i>
                        <h4>Live Chat</h4>                        
                   </div>
                   <div class="col-md-3 item-center">
                       <span class="arrow_footer"></span>
                        <i class="fa fa-envelope"></i>
                        <h4>Email Us</h4>                        
                   </div>
                   <div class="col-md-3 item-center">
                        <span class="arrow_footer"></span>
                        <i class="fa fa-thumbs-up"></i>
                        <h4>Good Support</h4>                        
                   </div>
               </div>    

                <div class="row">   
                   <div class="col-md-4">
                        <div class="border-right">
                            <i class="fa fa-twitter"></i>
                            <h4>Latest Tweet</h4>                     
                            <div class="twitter">  

                            </div>                        
                        </div>
                   </div>
                   <div class="col-md-3">
                        <div class="border-right">
                            <h4>Newsletter</h4>
                            <p>Enter your e-mail and subscribe to our newsletter.</p>

                            <form id="newsletterForm" action="php/mailchip/newsletter-subscribe.php">
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="fa fa-envelope"></i>
                                    </span>
                                    <input class="form-control" placeholder="Email Address" name="email"  type="email" required="required">
                                    <span class="input-group-btn">
                                        <button class="btn btn-primary" type="submit" name="subscribe" >Go!</button>
                                    </span>
                                </div>
                            </form>   
                            <div id="result-newsletter"></div>
                       </div>
                    </div>
                    <div class="col-md-2">
                        <div class="border-right">
                            <h4>Recent Links</h4>
                            <ul class="links">
                                <li><i class="fa fa-check"></i> <a href="#">Work</a></li>
                                <li><i class="fa fa-check"></i> <a href="#">About Us</a></li>
                                <li><i class="fa fa-check"></i> <a href="#">Services</a></li>
                                <li><i class="fa fa-check"></i> <a href="#">Contact</a></li>
                            </ul>
                       </div>
                    </div>
                   <div class="col-md-3">
                        <h4>Recent flickr</h4>
                        <ul id="flickr" class="thumbs"></ul>
                   </div>
               </div>    

            </div>
        </footer>      
        <!-- End footer Center-->

        <!-- footer bottom-->
        <footer class="footer-bottom">
            <div class="container">
               <div class="row">   
                                                                  
                    <!-- Nav-->
                    <div class="col-md-8">
                        <div class="logo-footer">
                            <h2><span>R</span>oken<span>.</span></h2>
                        </div>
                        <!-- Menu-->
                        <ul class="menu-footer">
                            <li><a href="index.html">HOME</a> </li>
                            <li><a href="about.html">ABOUT</a></li>
                            <li><a href="services.html">SERVICES</a></li> 
                            <li><a href="portfolio.html">PORTFOLIO</a></li> 
                            <li><a href="blog.html">BLOG</a></li>                                                     
                            <li><a href="contact.html">CONTACT</a></li>
                        </ul>
                        <!-- End Menu-->

                        <!-- coopring-->
                       <div class="row coopring">
                           <div class="col-md-8">
                               <p>&copy; 2013 Roken . All Rights Reserved.  1995 - 2013</p>
                           </div>
                       </div>    
                       <!-- End coopring-->  

                    </div>
                    <!-- End Nav-->

                    <!-- Social-->
                    <div class="col-md-4">
                        <!-- Social-->
                        <ul class="social">
                            <li data-toggle="tooltip" title data-original-title="Facebook">
                                <a href="#" target="_blank"><i class="fa fa-facebook"></i></a>
                            </li> 
                            <li data-toggle="tooltip" title data-original-title="Twitter">
                                <a href="#" target="_blank"><i class="fa fa-twitter"></i></a>
                            </li> 
                            <li data-toggle="tooltip" title data-original-title="Youtube">
                                <a href="#" target="_blank"><i class="fa fa-youtube"></i></a>
                            </li>                     
                        </ul>
                        <!-- End Social-->
                    </div>
                    <!-- End Social-->

               </div> 
                    
            </div>
        </footer>      
        <!-- End footer bottom-->

    </div>
    <!-- End layout-->

    <!-- ======================= JQuery libs =========================== -->
    <!-- Always latest version of jQuery-->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
     <!-- jQuery local-->    
    <script>window.jQuery || document.write('<script src="js/jquery.js"><\/script>')</script>    
    <!--Nav-->
    <script type="text/javascript" src="js/nav/tinynav.js"></script> 
    <script type="text/javascript" src="js/nav/superfish.js"></script> 
    <script type="text/javascript" src="js/nav/hoverIntent.js"></script>  
    <script src="js/nav/jquery.sticky.js" type="text/javascript"></script>                                           
    <!--Totop-->
    <script type="text/javascript" src="js/totop/jquery.ui.totop.js" ></script>  
    <!--Slide-->
    <script type="text/javascript" src="js/slide/camera.js" ></script>      
    <script type='text/javascript' src='js/slide/jquery.easing.1.3.min.js'></script>  
    <!--FlexSlider-->
    <script src="js/flexslider/jquery.flexslider.js"></script> 
    <!--Ligbox--> 
    <script type="text/javascript" src="js/fancybox/jquery.fancybox.js"></script> 
    <!-- carousel.js-->
    <script src="js/carousel/carousel.js"></script>  
    <!-- Twitter Feed-->
    <script src="js/twitter/jquery.tweet.js"></script> 
    <!-- flickr Feed-->
    <script src="js/flickr/jflickrfeed.min.js"></script>  
    <!--Scroll-->   
    <script src="js/scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
    <!-- Nicescroll -->
    <script src="js/scrollbar/jquery.nicescroll.js"></script>
    <!-- Maps -->
    <script src="js/maps/gmap3.js"></script>
    <!-- Filter -->
    <script src="js/filters/jquery.isotope.js" type="text/javascript"></script>
    <!--Theme Options-->
    <script type="text/javascript" src="js/theme-options/theme-options.js"></script>
    <script type="text/javascript" src="js/theme-options/jquery.cookies.js"></script>                                
    <!-- Bootstrap.js-->
    <script type="text/javascript" src="js/bootstrap/bootstrap.js"></script>
    <!--MAIN FUNCTIONS-->
    <script type="text/javascript" src="js/main.js"></script>
    <!-- ======================= End JQuery libs =========================== -->
        
    </body>
</html>